<template>
	<div class="progressBar">
		<p>{{transTime(currentTime)}}</p>
		<div class="duration" @touchmove="proMove">
			<div class="progress" :style="{width:percent}">
				<div class="progress-bot"></div>
			</div>
		</div>
		<p>{{transTime(currentDuration)}}</p>		
	</div>
</template>

<script>
	import {mapState} from "vuex";
	export default{
		data(){
			return{
				
			}
		},
		updated() {
			this.transTime(this.currentTime),
			this.transTime(this.currentDuration)
		},
		computed:{
			...mapState([
				'currentTime',
				'currentDuration'
			]),
			percent(){
				return ((this.currentTime/this.currentDuration)*100)+'%'
			}
		},
		
		methods:{
			//转换音频时长分/秒显示
			transTime(time) {
		        var duration = parseInt(time);
		        var minute = parseInt(duration/60);
		        var sec = duration%60+'';
		        var isM0 = ':';
		        if(minute == 0){
		            minute = '00';
		        }else if(minute < 10 ){
		            minute = '0'+minute;
		        }
		        if(sec.length == 1){
		            sec = '0'+sec;
		        }
		        return minute+isM0+sec
		    },
			proMove(event){
				// 根据位置来决定播放进度
				let touchPageX = event.targetTouches[0].pageX;
				let selfLeft = event.currentTarget.offsetLeft;
				let selfWidth = event.currentTarget.offsetWidth;
				let percent = (touchPageX-selfLeft)/selfWidth
				if(percent>0.99){
					percent = 0.99
				}
				this.audio.currentTime = percent*this.currentDuration;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progressBar{
		width: 100%;
		// height: 15px;
		position: fixed;
		bottom: 15%;
		display: flex;
		justify-content: space-between;
		p{
			width: 17%;
			font-size: 13px;
			color: rgba(255,255,255,0.8);
		}
		.duration{
			width: 66%;
			height: 4px;
			background-color: #9c9c9c;
			position: relative;
			margin: 6px auto;
			border-radius: 5px;
			.progress{
				height: 4px;
				background-color: hotpink;
				border-radius: 5px;
				position: absolute;
				left: 0;
				top: 0;
				.progress-bot{
					position: absolute;
					right: 0;
					top: -2px;
					width: 8px;
					height: 8px;
					background-color: white;
					border-radius: 50%;
				}
			}
		}
	}
</style>
